import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useNews } from './useNew'
import ArticleCard from '@/components/ArticleCard'
import Form from '@/components/Form'
import Bread from '@/components/Bread'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}

const shortText = (value:string) => {
  if (value.length > 50) {
      return value.slice(0, 50) + '...';
  }
  return value
}
const News = () => {
    // 逻辑业务
    const { detailData, isLoading } = useNews()
    const breadNav: Item[] = [
      { id: 1, title: 'News', link: '/news', classname: '' },
      { id: 2, title: shortText(detailData?.title||''), link: '/news', classname: 'active' },
    ]
    // UI 渲染
    return (
      <div>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div>:
        <div>
          <div className='content-box'>
            <Bread items={breadNav}/>
            <ArticleCard 
              title={detailData.title} 
              content={detailData.content}
              classname='article-panel'
            />
          </div>
          <Form />
        </div>
        }

      </div>
    )
  }
  
  export default News
  